<script setup lang="ts" name="HjGuide">
import Driver from "driver.js"
import "driver.js/dist/driver.min.css"
const guide = () => {
  const driver = new Driver({
    allowClose: false,
    doneBtnText: "结束",
    closeBtnText: "关闭",
    nextBtnText: "下一步",
    prevBtnText: "上一步"
  })
  driver.defineSteps(steps)
  driver.start()
}

const steps = [
  {
    element: "#ToggleSidebar",
    popover: {
      title: "按钮",
      description: "这是用于侧边栏收缩",
      position: "right"
    }
  },
  {
    element: "#breadcrumb",
    popover: {
      title: "面包屑",
      description: "这是一个面包屑",
      position: "right"
    }
  },
  {
    element: "#FullScreen",
    popover: {
      title: "全屏",
      description: "这是一个全屏按钮",
      position: "left"
    }
  },
  {
    element: "#avatar",
    popover: {
      title: "头像",
      description: "这理应是侯军涛大脸,他不乐意放",
      position: "left"
    }
  }
]
</script>

<template>
  <div class="card content-box">
    <span class="text"> 引导页 🍓🍇🍈🍉</span>
    <el-alert
      title="引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于 driver.js."
      type="warning"
      :closable="false"
    />
    <div id="Geeker">
      <el-button type="primary" @click="guide"> 打开引导页 🤹‍♂️ </el-button>
    </div>
  </div>
</template>

<style scoped lang="scss">
@import "./HjGuide.scss";
</style>
